<template>
  <div class="course-management-container">
    <!-- 顶部操作按钮 -->
    <div class="search-filter-card">
      <el-form-item label="班级">
        <el-select
            v-model="searchForm.classId"
            filterable
            placeholder="请选择班级"
            clearable
            style="width: 180px"
            @change="handleChange"
        >
          <el-option
              v-for="item in classOptions"
              :key="item.classId"
              :label="item.name"
              :value="item.classId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="教师">
        <el-select
            v-model="searchForm.teacherId"
            filterable
            placeholder="请选择教师"
            clearable
            style="width: 180px"
            @change="handleChange"
        >
          <el-option
              v-for="item in teacherOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-select
            v-model="searchForm.courseId"
            filterable
            placeholder="请选择课程"
            clearable
            style="width: 180px"
            @change="handleChange"
        >
          <el-option
              v-for="item in courseOptions"
              :key="item.courseId"
              :label="item.name"
              :value="item.courseId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select
            v-model="searchForm.semesterId"
            filterable
            placeholder="请选择学期"
            clearable
            style="width: 180px"
            @change="handleChange"
        >
          <el-option
              v-for="item in semesterOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="action-buttons">
      <el-button type="danger" v-if="props.formType === 'Student'">删除</el-button>
      <el-button type="primary" @click="addVisible=true">添加</el-button>
      <el-button type="info">EXCEL导入</el-button>
      <el-button type="success">EXCEL导出</el-button>
    </div>

    <!-- 搜索筛选区域 -->

    <el-table
        :data="data"
        height="500px"
        border
        stripe
        highlight-current-row
    >
      <el-table-column type="selection"/>
      <el-table-column
          v-for="item in props.title"
          :key="item.propName"
          :prop="item.propName"
          :label="item.name"
          align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small">无用</el-button>
          <el-button type="primary" size="small">无用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="dataLength">
    </el-pagination>
    <el-dialog v-model="addVisible" title="添加" width="500" destroy-on-close @close="handleClose">
      <LectureFormComponent @visible="handleDialogCancel"/>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import request from "@/requests/request.js";
import LectureFormComponent from "@/components/form/LectureFormComponent.vue";

const props = defineProps({
  title: Array,
  url: {
    type: Object,
    default: () => ({
      deleteUrl: '',
      editUrl: '',
      showUrl: '',
      getCountUrl: '',
      searchUrl: ''
    })
  },
  formType: String
})

// 数据状态
const data = ref([
  {
    classId: 1,
    className: "23软件工程1班",
    courseId: 66,
    courseName: "JavaEE Web 编程技术",
    teacherId: "20250529001",
    teacherName: "刘美玲",
    semester: 3,
    type: "专业必修"
  }
])
const courseOptions = ref([])
const classOptions = ref([])
const teacherOptions = ref([])
const semesterOptions = ref([
  { id: 1, name: '大一上' },
  { id: 2, name: '大一下' },
  { id: 3, name: '大二上' },
  { id: 4, name: '大二下' },
  { id: 5, name: '大三上' },
  { id: 6, name: '大三下' },
])

const handleChange = () => {
  request.get('/lecture/get-all-lecture-by-condition', {
    params: {
      classId: searchForm.classId,
      courseId: searchForm.courseId,
      teacherId: searchForm.teacherId,
      semester: searchForm.semesterId,
      type: '',
      page: currentPage.value,
      size: 10,
    }}).then(res => {
    data.value = res.data.data['lectures']
    dataLength.value = res.data.data['total']
  })
}
onMounted(() => {
  request.get('/class/get-all-info').then(res => {
    classOptions.value = res.data.data
  })
  request.get('/teacher/get-teacher-node').then(res => {
    teacherOptions.value = res.data.data
  })
  request.get('/course/get-course-list').then(
      res => {
        courseOptions.value = res.data.data
      }
  )
  request.get('/lecture/get-all-lecture-by-condition', {
    params: {
      courseId: searchForm.courseId,
      teacherId: searchForm.teacherId,
      semester: searchForm.semesterId,
      type: '',
      page: currentPage.value,
      size: 10,
    }}).then(res => {
    data.value = res.data.data['lectures']
    dataLength.value = res.data.data['total']
  })
})
const handlePageChange = (page) => {
  currentPage.value = page;
  request.get('/lecture/get-all-lecture-by-condition', {
    params: {
      courseId: searchForm.courseId,
      teacherId: searchForm.teacherId,
      semester: searchForm.semesterId,
      type: '',
      page: currentPage.value,
      size: 10,
    }}).then(res => {
    data.value = res.data.data['lectures']
    dataLength.value = res.data.data['total']
  })
}
// 搜索表单
const searchForm = reactive({
  courseId: '',
  semesterId: '',
  teacherId: '',
  classId: ''
})

// 课程、教师、学期选项
// 分页相关
const dataLength = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 计算当前页数据
const addVisible = ref(false)
const handleDialogCancel = (visible) => {
  addVisible.value = visible;
  console.log('cancel', visible);
};
// 生命周期钩子
onMounted(() => {
  // 模拟获取数据总数
  dataLength.value = data.value.length
})
const handleClose = () => {
  request.get('/lecture/get-all-lecture-by-condition', {
    params: {
      classId: searchForm.classId,
      courseId: searchForm.courseId,
      teacherId: searchForm.teacherId,
      semester: searchForm.semesterId,
      type: '',
      page: currentPage.value,
      size: 10,
    }}).then(res => {
    data.value = res.data.data['lectures']
    dataLength.value = res.data.data['total']
  })
}
// 处理选择变化
</script>

<style scoped>
.course-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  width: 85vw;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-filter-card {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}


.dialog-form-row > .el-form-item {
  flex: 1;
  margin-bottom: 0;
}
.el-table {
  background-color: white;
  color: #333;
  font-size: 14px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
